<template>
    <a-form :form="form" class="formStyle">
        <div class="treeSty">
            <!-- tree 树形结构 -->
            <a-tree :tree-data="treeDataFirm" :checkable="true" defaultExpandAll :showIcon="true" @select="onSelectIndex"
                @check="handleCheck" selectable @expand="onExpand">

            </a-tree>
        </div>
        <div class="btnStyle">
            <a-form-item :wrapperCol="{ span: 24, offset: 5 }">
                <a-button :style="color=isclor" :type="clorbtn"  @click="nextStep">下一步</a-button>
                <a-button @click="searchReset" icon="reload">重置</a-button>
            </a-form-item>
        </div>

    </a-form>
</template>

<script>
import axios from 'axios'

export default {
    name: '',
    data() {
        return {
            selectedKeys: [],
            wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
            title: '',
            visible: false,
            roleDisabled: false,
            confirmLoading: false,
            // 数据
            treeDataFirm: [],
            defaultCheck: true,
            form: this.$form.createForm(this),  // 手机表单中的数据
            // 公司用户
            formTitle: '',
            // 选中的公司的 title
            treeTitleList: [],

            bigtitle: [],
            smalltitle: [],
            
            clorbtn: 'dashed',
            isclor: '#eee'

        }
    },
    mounted() {
        this.pointerRequestFirm()
    },
    watch: {
        checkedKeys(val) {
            // console.log('onCheck', val);
        },
    },
    methods: {
        async pointerRequestFirm() {
            const result = await axios.get('/mock/tebleTemplateTree')
            this.treeDataFirm = result.data.data
            // console.log(result, '部门模拟数据------------------')
        },

        goNewFormFirm(url, title) {
            this.formTitle = title
            // alert(title, '展示点击的公司对应的值')
            // console.log(this.$router)
        },

        onTreeChange(e) {
            this.defaultCheck = !this.defaultCheck
            // console.log(`checked = ${this.defaultCheck}`)
        },


        // 选中高亮的节点
        handleCheck(checkedKeys, { checked: bool, checkedNodes, node, event }) {
            
            //function(checkedKeys,     e:{checked: bool, checkedNodes, node, event})
            // console.log(checkedKeys,'///')
            this.smalltitle = checkedKeys
            // this.updateSelectedTree(checkedNodes)
            // 创建一个新数组
            // const selectedTreeList = []
            // for (const node of checkedNodes) {
            //     const cloneNode = this.cloneNodeWithChildren(node)
            //     selectedTreeList.push(cloneNode)
            // }
            // console.log(selectedTreeList, 'selectedTreeList')
            // selectedTreeList.forEach(item => {
            //     // console.log(item.key)
            // })
            // this.treeTitleList = selectedTreeList
            // console.log(this.treeTitleList, this.treeTitleList, '选中的tree数据')
            // console.log(checkedKeys, 'checkedKeys高亮的节点')
            // const result = this.treeDataFirm.filter(node => checkedKeys.includes(node.key))
            // console.log(result, 'result----------')
            // this.treeDataFirm.forEach(item => {
            //     // console.log(item, '数组')
            //     const selectedNodes = item.children.filter(node => checkedKeys.includes(node.key))
            //     this.treeTitleList = selectedNodes.map(node1 => node1.title)
            //     // console.log(this.treeTitleList, '======================')
            // })
        },

        cloneNodeWithChildren(node) {
            const cloneNode = { ...node }
            if (cloneNode.children) {
                cloneNode.children = cloneNode.children.map(childNode => {
                    return this.cloneNodeWithChildren(childNode)
                })
            }
            return cloneNode
        },

        // 指标树节点
        onSelectIndex(e, selectedKeys, info) {
            // console.log(e, 'e点击提示')
            // console.log('selected', selectedKeys, info);
            // this.recursiveFilter(this.treeDataFirm, e[0])
            // console.log(this.treeDataFirm, '======treeInfo')
        },

        onExpand(expandedKeys) {
            // console.log('onExpand', expandedKeys); 
            this.bigtitle = expandedKeys
            // if not set autoExpandParent to false, if children expanded, parent can not collapse.
            // or, you can remove all expanded children keys.
            // this.expandedKeys = expandedKeys;
            // this.autoExpandParent = false;

        },

        onCheck(checkedKeys) {
            // console.log('onCheck', checkedKeys);
            this.checkedKeys = checkedKeys;
        },

        onSelect(selectedKeys, title) {
            // console.log('onSelect', title);
            this.selectedKeys = selectedKeys;
        },
        // 下一步
        nextStep() {

            // 整理参数，当点击下一步的时候携带参数传递给指标
            // let nextTitle = { title: this.formTitle }
            // console.log(nextTitle, '---------传递')
            // let treeTitle = this.treeTitleList
            // console.log(treeTitle, '---------传递')
            console.log(this.checkedKeys,'///////')

           
            this.isclor = '#50baf3'
            this.clorbtn = 'primary'
            let treedata = {
                big: this.bigtitle,
                small: this.smalltitle
            }
            if (this.smalltitle.length>0) {

                this.$bus.$emit('aaa', 1)


                setTimeout(() => {
                    this.$bus.$emit('nextTitle', treedata)
                });
            }else{
                this.$message.warning('请选择条件')
            }





            // this.$bus.$emit('treeTitle', treeTitle)
            // const {
            //     form: { validateFields }
            // } = this
            // // 先校验，通过表单校验后，才进入下一步
            // validateFields((err, values) => {
            //     if (!err) {
            //         let arr = []
            //         this.GRI && arr.push('GRI')
            //         this.SDG && arr.push('SDG')
            //         this.SASB && arr.push('SASB')
            //         this.$emit('nextStep', arr)
            //     }
            // })
        },
        // 重置
        searchReset() { },
    }
}
</script>

<style lang="scss" scoped>
.formStyle {
    max-width: 70%;
    height: 560px;
    margin-left: 40%;
    display: flex;
    flex-direction: column;

    .treeSty {
        width: 400px;
        background: #fff;
        opacity: .8;
    }

    .btnStyle {
        margin: 10% -40%;
        ;
    }
}
</style>